<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据库测试学生端</title>
<link href="../css/bootstrap/bootstrap.min.css" rel="stylesheet"
	media="screen">
</head>
<body>
	<div class="container">
		<div class="row">
		<div class="well">
			<h3>工号：<span class="label label-default">1</span></h3>
			<h3>姓名：<span class="label label-default">Peter</span></h3>
		</div>
			<div class="col-md-6">
				<form role="form">
					<div class="form-group">
						<label for="name">选择学生列表</label>
						<select class="form-control" id="select-t">
						</select>
					</div>
				<button type="button" class="btn btn-info" onclick="select();" >选择</button>
				</form>
			</div>
			<div class="col-md-6">
				<div class="panel panel-info">
					<div class="panel-heading">修改学生</div>
					<table class="table">
						<thead>
							<tr>
								<td>id</td>
								<td>姓名</td>
								<td>管理</td>
							</tr>
						</thead>
					<tbody>
					</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../js/jquery/jquery-3.3.1.min.js"></script>
	<%-- 最新的 Bootstrap 核心 JavaScript 文件 --%>
	<script src="../js/bootstrap/bootstrap.min.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(function(){
		$.ajax({
			url : '../TchServlet?op=1',
			method : 'POST',
			contentType : "application/x-www-form-urlencoded",
			dataType : "json",
			//成功
			success : function(msg) {
				console.log(msg);
				$select = $('#select-t');
				for (var i = 0, len = msg.length; i < len; i++) {
					$option = $('<option value='+msg[i].id+'>'+msg[i].name+'</option>');
					$select.append($option);
				}
			},
			//请求错误
			error : function(err) {
				console.log(err);
			}
		});
	});		
		function select(){
			var id = $('#select-t option:selected').val();
			var name = $('#select-t option:selected').text();
			$.ajax({
				url : '../TchServlet?op=2',
				method : 'POST',
				contentType : "application/x-www-form-urlencoded",
				data:"sid="+id+"&sname="+name,
				dataType : "json",
				//成功
				success : function(msg) {
					console.log(msg);
					$table = $('table tbody');
					for(var i = 0,len=msg.length;i<len;i++){
						$td1 = $('<td></td>');
						$td2 = $('<td></td>');
						$td3 = $('<td></td>');
						$tr = $('<tr></tr>');
						$td1.append(msg[i].id);
						$td2.append(msg[i].name);
						$td3.append($('<button class="btn btn-info" onclick="showSel();">修改</button>'));
						$tr.append($td1,$td2,$td3);
						$table.append($tr);
						alert('选择或修改成功');
						$('form').hide(500);
					}
				},
				//请求错误
				error : function(err) {
					console.log(err);
				}
			});
		}
		function showSel(){
			$('form').show(500);
		}
	</script>
</body>
</html>